<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'Static Website' }}</title>
    <link rel="stylesheet" href="{{ asset('web/css/style.css') }}" />
    <script src="{{ asset('web/js/jquery-3.7.1.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('web/css/idangerous.swiper.css') }}">
    <script src="{{ asset('web/js/idangerous.swiper.min.js') }}"></script>
    @stack('styles')
</head>

<body>
    <header>
        <nav class="navbar">
            <div class="logo-container">
                <img class="logo" src="{{ asset('web/image/logo.png') }}" width="166" height="48">
            </div>
            <ul class="menu">
                @foreach($categories as $v)
                    @if ($v->isShow)
                        <a href="{{ route($v->url) }}">
                            <li class="{{ request()->routeIs($v->url) ? 'menu-item active' : 'menu-item' }}">
                                {{ $v->name }}
                            </li>
                        </a>
                    @endif
                @endforeach
            </ul>
        </nav>
    </header>
    <main>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @foreach($categories as $v)
                    @if (request()->routeIs($v->url))
                        @foreach ($v->swipers as $vv)
                            <div class="swiper-slide slider-first" style="background-image: url({{ $vv }});"></div>
                        @endforeach
                        @php
                            break;
                        @endphp
                    @endif
                @endforeach
            </div>
        </div>
        <div style="position: fixed; bottom: 150px; right: 30px; z-index: 9999;">
            <img src="{{ asset('web/image/gh_beb7d2260918_344.jpg') }}" width="200" height="200">
        </div>
        @yield('content')
    </main>
    <footer>
        <div class="footer-container">
            <div class="footer-content">
                <div class="logo">
                    <div><img src="{{ asset('web/image/logo.png') }}" width="75" height="17"></div>
                    <div style="margin: 23px 0 15px;"><img src="{{ $settings['qrcode'] }}" width="75" height="75"></div>
                    <div class="text">立即联系我们</div>
                </div>
                <div class="contact">
                    <div class="text1">联系方式</div>
                    <div class="text2">{{ $settings['phone'] }}</div>
                    <div class="text3">联系地址</div>
                    <div class="text4">{{ $settings['address'] }}</div>
                </div>
            </div>
        </div>
    </footer>
    <script type="text/javascript">
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: 3000,
        });
    </script>
</body>

</html>